<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px;
            border: #bfa 3px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        .d1 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .d2 {
            width: 200px;
            height: 200px;
            float: right;
        }

        .d3 {
            width: 100px;
            height: 100px;
            /* 清除浮动元素对自己的影响
            clear: left;清除向左浮动元素的影响
            clear: right;清除向右浮动元素的影响
            clear: both;清除对自身影响最大一侧浮动的影响
             */
            clear: both;
        }

        .d41 {
            width: 100px;
            height: 100px;
            background-color: #ccf;
            float: left;
        }

        .d42 {
            clear: both;
        }

        .d51 {
            width: 100px;
            height: 100px;
            background-color: #ccf;
            float: left;
        }

        .d5::after {
            display: block;
            content: "";
            clear: both;
        }

        /* 用于清解决外边距重叠、父元素高度塌陷 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="d1">left</div>
    <div class="d2">right</div>
    <div class="d3">clear</div>
    <hr>
    <div class="d4">
        <div class="d41"></div>
        <div class="d42"></div>
    </div>
    <hr>
    <div class="d5">
        <div class="d51"></div>
    </div>
</body>

</html>